<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <style>
        .simplePerson {
            text-align: center;
            color: #7A786F;
            padding-top: 50px;
            padding-bottom: 110px;
            background-color: #E8E6E8;
        }

        .mymenu {
            margin: 15px auto;
        }

        .mymenu i {
            margin-right: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //从sessionStorage中取出缓存的当前用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (!user) {
                $("img").attr("src", "");
                location.href = "/login.html";
                return;
            }
            //选中需要渲染的模板,传入数据执行渲染操作
            $(".simplePerson").renderValues(user);

            //拿到注销div,绑定点击事件,发送delete请求
            $("#logout").click(function () {
                $.ajax({
                    url: "/sessions",
                    type: "DELETE",
                    success: function () {
                        //先本地session删除,再调整界面
                        sessionStorage.removeItem("user");
                        parent.location.href = "/index.html";
                    }
                });
            });

            //找到我的所在的div绑定点击事件
            $(".mymenu:first").click(function () {
                //拿到内部a标签的data-url属性值,然后跳转过去
                var url = $(this).find("a").data("url");
                parent.location.href = url;
            });

            //找到设置所在的div绑定点击事件
            $("#info").closest("div").click(function () {
                //拿到内部a标签的data-url属性值,然后跳转过去
                var url = $(this).find("a").data("url");
                parent.location.href = url;
            });
            //找到消息div并绑定点击事件
            $("#message").closest("div").click(function () {
                parent.location.href = "/usermessage/message.html";
            });
        });
    </script>
</head>

<body>
<div class="simplePerson">
    <img class="rounded-circle" width="20%" render-src="headImgUrl">
    <p><strong render-html="nickName"></strong></p>
    <p render-html="email"></p>
    <hr>
    <div class="mymenu">
        <i class="fa fa-user fa-2x fa-fw"></i>
        <a data-url="/mine/profiles.html" href="javascript:">我的</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-bell fa-2x fa-fw"></i>
        <a id="message" href="javascript:">信息</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-comment fa-2x fa-fw"></i>
        <a href="javascript:">通知</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-cog fa-2x fa-fw"></i>
        <a data-url="/mine/info.html" href="javascript:" id="info">设置</a>
    </div>
    <hr style="margin-top: 50px;">
    <div class="mymenu" id="logout">
        <i class="fa fa-sign-out fa-2x fa-fw"></i>
        <label>退出登录</label>
    </div>
</div>
</body>
</html>